<template>
  <div id="enterprise-platform">
    <!-- 导航栏 -->
    <Navbar />
    
    <!-- 页面头部 -->
    <section class="page-header">
      <div class="container">
        <div class="back-button-container">
          <button class="back-button" @click="goBackToProducts">
            <i class="fas fa-arrow-left"></i>
            返回产品服务
          </button>
        </div>
        <div class="header-content">
          <h1 class="page-title">智联企服 · 驱动新质生产力生态</h1>
          <p class="page-subtitle">以科技创新驱动新型生产力，打造专属于企业的高效任务撮合生态</p>
          <div class="header-badges">
            <span class="badge">AI智能估值</span>
            <span class="badge">股权激励</span>
            <span class="badge">精准匹配</span>
          </div>
        </div>
      </div>
    </section>

    <!-- 平台简介 -->
    <section class="intro-section">
      <div class="container">
        <div class="intro-content">
          <div class="intro-text">
            <h2>重新定义企业任务发布模式</h2>
            <p>区别于传统外包网站，我们将AI智能估值、股权激励机制与精准人才匹配深度融合，为企业提供更灵活、更具前瞻性的任务发布方式。通过统一社会信用代码认证，确保任务真实性与高价值性，构建可信赖的企业级协作生态。</p>
          </div>
          <div class="intro-visual">
            <div class="visual-card">
              <i class="fas fa-building"></i>
              <h3>企业认证</h3>
              <p>统一社会信用代码验证</p>
            </div>
            <div class="visual-card">
              <i class="fas fa-chart-line"></i>
              <h3>AI估值</h3>
              <p>智能分析任务价值</p>
            </div>
            <div class="visual-card">
              <i class="fas fa-handshake"></i>
              <h3>精准匹配</h3>
              <p>最优人才推荐</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 核心功能 -->
    <section class="features-section">
      <div class="container">
        <div class="section-header">
          <h2>核心功能亮点</h2>
          <p>四大创新功能，构建企业级任务撮合生态</p>
        </div>

        <div class="features-grid">
          <!-- 功能1：企业认证发布 -->
          <div class="feature-card">
            <div class="feature-icon">
              <i class="fas fa-shield-alt"></i>
            </div>
            <div class="feature-content">
              <h3>1. 企业认证发布机制</h3>
              <p class="feature-description">平台仅支持通过统一社会信用代码认证的企业账号进行任务发布，确保任务的真实性与高价值性。</p>
              <div class="feature-details">
                <div class="detail-item">
                  <i class="fas fa-check-circle"></i>
                  <span>统一社会信用代码验证</span>
                </div>
                <div class="detail-item">
                  <i class="fas fa-check-circle"></i>
                  <span>详细任务描述与期望成果</span>
                </div>
                <div class="detail-item">
                  <i class="fas fa-check-circle"></i>
                  <span>AI自动分区评级与金额估算</span>
                </div>
                <div class="detail-item">
                  <i class="fas fa-check-circle"></i>
                  <span>项目周期智能规划</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 功能2：技术股模式 -->
          <div class="feature-card">
            <div class="feature-icon">
              <i class="fas fa-coins"></i>
            </div>
            <div class="feature-content">
              <h3>2. 创新"技术股"发布模式</h3>
              <p class="feature-description">不同于传统的"资金外包"模式，企业可选择"技术股"或"股权+现金"的混合形式发布任务。</p>
              <div class="feature-details">
                <div class="detail-item">
                  <i class="fas fa-check-circle"></i>
                  <span>纯技术股任务发布</span>
                </div>
                <div class="detail-item">
                  <i class="fas fa-check-circle"></i>
                  <span>股权+现金混合模式</span>
                </div>
                <div class="detail-item">
                  <i class="fas fa-check-circle"></i>
                  <span>AI智能测算合理股份比例</span>
                </div>
                <div class="detail-item">
                  <i class="fas fa-check-circle"></i>
                  <span>基于企业估值与市场行情</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 功能3：AI智能匹配 -->
          <div class="feature-card">
            <div class="feature-icon">
              <i class="fas fa-brain"></i>
            </div>
            <div class="feature-content">
              <h3>3. AI智能匹配最优人才</h3>
              <p class="feature-description">平台智能推荐系统根据任务特征，自动匹配以往成功完成过相似任务的优秀人才。</p>
              <div class="feature-details">
                <div class="detail-item">
                  <i class="fas fa-check-circle"></i>
                  <span>过往战绩与完成度分析</span>
                </div>
                <div class="detail-item">
                  <i class="fas fa-check-circle"></i>
                  <span>专业技能标签匹配</span>
                </div>
                <div class="detail-item">
                  <i class="fas fa-check-circle"></i>
                  <span>地区与响应速度考量</span>
                </div>
                <div class="detail-item">
                  <i class="fas fa-check-circle"></i>
                  <span>历史信誉分综合评估</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 功能4：数据驱动生态 -->
          <div class="feature-card">
            <div class="feature-icon">
              <i class="fas fa-chart-pie"></i>
            </div>
            <div class="feature-content">
              <h3>4. 数据驱动的成长生态</h3>
              <p class="feature-description">随着任务完成与数据沉淀，平台持续学习形成智能化生态闭环，实现企业与人才的精准匹配。</p>
              <div class="feature-details">
                <div class="detail-item">
                  <i class="fas fa-check-circle"></i>
                  <span>任务类型与人才画像学习</span>
                </div>
                <div class="detail-item">
                  <i class="fas fa-check-circle"></i>
                  <span>智能化生态闭环构建</span>
                </div>
                <div class="detail-item">
                  <i class="fas fa-check-circle"></i>
                  <span>个人价值持续增长</span>
                </div>
                <div class="detail-item">
                  <i class="fas fa-check-circle"></i>
                  <span>真实项目信誉积累</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 平台优势 -->
    <section class="advantages-section">
      <div class="container">
        <div class="section-header">
          <h2>平台核心优势</h2>
          <p>相比传统外包平台，我们提供更智能、更灵活的解决方案</p>
        </div>

        <div class="advantages-comparison">
          <div class="comparison-card traditional">
            <h3>传统外包平台</h3>
            <ul>
              <li>仅支持现金交易</li>
              <li>坚决抵制甲乙方线下沟通</li>
              <li>人才匹配精度低</li>
              <li>缺乏企业认证机制</li>
              <li>用户经验缺乏认证</li>
              <li>无法积累长期价值</li>

              <li>匹配算法简单</li>
            </ul>
          </div>

          <div class="vs-divider">
            <span>VS</span>
          </div>

          <div class="comparison-card our-platform">
            <h3>我们的平台</h3>
            <ul>
              <li>技术股+现金混合模式</li>
              <li>支持鼓励线下交流</li>
              <li>AI智能精准匹配</li>
              <li>企业统一信用代码认证</li>
              <li>股权激励长期价值</li>
              <li>用户成长化能力认证</li>

              <li>多维度智能算法</li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <!-- 投资价值 -->
    <section class="investment-section">
      <div class="container">
        <div class="section-header">
          <h2>投资价值与市场前景</h2>
          <p>把握企业数字化转型机遇，构建万亿级任务撮合市场</p>
        </div>

        <div class="investment-grid">
          <div class="investment-card">
            <div class="investment-icon">
              <i class="fas fa-chart-line"></i>
            </div>
            <h3>万亿级市场空间</h3>
            <p>企业数字化转型催生巨大任务外包需求，预计2035年市场规模将突破万亿</p>
          </div>

          <div class="investment-card">
            <div class="investment-icon">
              <i class="fas fa-rocket"></i>
            </div>
            <h3>技术壁垒优势</h3>
            <p>AI智能估值+股权激励的创新模式，形成独特技术壁垒和竞争优势</p>
          </div>

          <div class="investment-card">
            <div class="investment-icon">
              <i class="fas fa-network-wired"></i>
            </div>
            <h3>网络效应显著</h3>
            <p>平台用户越多，匹配精度越高，形成强大的网络效应和用户粘性</p>
          </div>

          <div class="investment-card">
            <div class="investment-icon">
              <i class="fas fa-gem"></i>
            </div>
            <h3>高价值客户群体</h3>
            <p>企业级客户付费能力强，客单价高，平台盈利能力强劲</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 联系我们 -->
    <section class="contact-section">
      <div class="container">
        <div class="section-header">
          <h2>立即体验</h2>
          <p>开启企业任务撮合新篇章，联系我们了解更多详情</p>
        </div>
        <PhoneSlider />
      </div>
    </section>

    <!-- 页脚 -->
    <Footer />
  </div>
</template>

<script>
import Navbar from '../components/Navbar.vue'
import Footer from '../components/Footer.vue'
import PhoneSlider from '../components/PhoneSlider.vue'

export default {
  name: 'EnterprisePlatform',
  components: {
    Navbar,
    Footer,
    PhoneSlider
  },
  mounted() {
    // 页面加载后滚动到顶部
    window.scrollTo(0, 0)
  },
  methods: {
    goBackToProducts() {
      // 返回到首页的Products部分
      this.$router.push('/').then(() => {
        // 等待页面加载完成后滚动到Products部分
        setTimeout(() => {
          const productsElement = document.getElementById('products')
          if (productsElement) {
            productsElement.scrollIntoView({ 
              behavior: 'smooth',
              block: 'start'
            })
          }
        }, 100)
      })
    }
  }
}
</script>

<style scoped>
/* 页面头部样式 */
.page-header {
  background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #06b6d4 100%);
  color: white;
  padding: 120px 0 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.back-button-container {
  position: absolute;
  top: 40px;
  left: 20px;
  z-index: 10;
}

.back-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 0.8rem 1.5rem;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  font-size: 0.9rem;
  font-weight: 500;
}

.back-button:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
}

.back-button i {
  font-size: 0.9rem;
}

.page-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  opacity: 0.3;
}

.page-title {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  position: relative;
  z-index: 1;
}

.page-subtitle {
  font-size: 1.3rem;
  opacity: 0.9;
  max-width: 800px;
  margin: 0 auto 2rem;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.header-badges {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.badge {
  background: rgba(255, 255, 255, 0.2);
  padding: 8px 20px;
  border-radius: 25px;
  font-size: 0.9rem;
  font-weight: 600;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* 通用section样式 */
.intro-section,
.features-section,
.advantages-section,
.investment-section,
.contact-section {
  padding: 80px 0;
}

.intro-section {
  background: linear-gradient(135deg, #1e293b 0%, #334155 50%, #475569 100%);
  color: white;
  position: relative;
  overflow: hidden;
}

.intro-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(6, 182, 212, 0.1) 100%);
  pointer-events: none;
}

.features-section,
.advantages-section,
.investment-section,
.contact-section {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #334155 50%, #475569 75%, #64748b 100%);
  color: white;
  position: relative;
  overflow: hidden;
}

.features-section::before,
.advantages-section::before,
.investment-section::before,
.contact-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(6, 182, 212, 0.05) 50%, rgba(139, 92, 246, 0.05) 100%);
  pointer-events: none;
}

.section-header {
  text-align: center;
  margin-bottom: 60px;
}

.section-header h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
}

.section-header p {
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
  opacity: 0.9;
  position: relative;
  z-index: 1;
}

/* 简介部分 */
.intro-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.intro-text h2 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  color: white;
  position: relative;
  z-index: 1;
}

.intro-text p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
  position: relative;
  z-index: 1;
}

.intro-visual {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.visual-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
  padding: 2rem 1.5rem;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(59, 130, 246, 0.2);
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.visual-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(135deg, #3b82f6, #06b6d4);
}

.visual-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.3);
}

.visual-card i {
  font-size: 2.5rem;
  background: linear-gradient(135deg, #3b82f6, #06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1rem;
}

.visual-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: white;
  font-weight: 600;
  position: relative;
  z-index: 1;
}

.visual-card p {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
  position: relative;
  z-index: 1;
}

/* 功能卡片 */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.feature-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
  border-radius: 24px;
  padding: 2.5rem;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(6, 182, 212, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.feature-card:hover::before {
  opacity: 1;
}

.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.4);
}

.feature-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #3b82f6, #06b6d4);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  position: relative;
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
  transition: all 0.3s ease;
}

.feature-card:hover .feature-icon {
  transform: scale(1.1);
  box-shadow: 0 15px 40px rgba(59, 130, 246, 0.4);
}

.feature-icon i {
  font-size: 2rem;
  color: white;
  position: relative;
  z-index: 1;
}

.feature-content h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: white;
  position: relative;
  z-index: 1;
}

.feature-description {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  color: rgba(255, 255, 255, 0.9);
  position: relative;
  z-index: 1;
}

.feature-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.8rem;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  position: relative;
  z-index: 1;
}

.detail-item i {
  color: #06b6d4;
  font-size: 0.8rem;
}

/* 对比部分 */
.advantages-comparison {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
  align-items: center;
}

.comparison-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
  border-radius: 20px;
  padding: 2.5rem;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.comparison-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  transition: all 0.3s ease;
}

.comparison-card.traditional::before {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

.comparison-card.our-platform::before {
  background: linear-gradient(135deg, #22c55e, #16a34a);
}

.comparison-card.traditional {
  border-color: rgba(239, 68, 68, 0.3);
}

.comparison-card.our-platform {
  border-color: rgba(34, 197, 94, 0.3);
}

.comparison-card h3 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  text-align: center;
}

.comparison-card.traditional h3 {
  color: #ef4444;
}

.comparison-card.our-platform h3 {
  color: #22c55e;
}

.comparison-card ul {
  list-style: none;
  padding: 0;
}

.comparison-card li {
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.comparison-card li:last-child {
  border-bottom: none;
}

.vs-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #3b82f6, #06b6d4);
  border-radius: 50%;
  font-weight: bold;
  font-size: 1.3rem;
  color: white;
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.4);
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
}

.vs-divider:hover {
  transform: scale(1.1);
  box-shadow: 0 15px 40px rgba(59, 130, 246, 0.5);
}

/* 投资价值 */
.investment-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

.investment-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
  border-radius: 20px;
  padding: 2.5rem;
  text-align: center;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.investment-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(135deg, #3b82f6, #06b6d4);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.investment-card:hover::before {
  transform: scaleX(1);
}

.investment-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.4);
}

.investment-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #3b82f6, #06b6d4);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
  transition: all 0.3s ease;
}

.investment-card:hover .investment-icon {
  transform: scale(1.1);
  box-shadow: 0 12px 35px rgba(59, 130, 246, 0.4);
}

.investment-icon i {
  font-size: 1.8rem;
  color: white;
}

.investment-card h3 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: white;
}

.investment-card p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .investment-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 1000px;
  }
}

@media (max-width: 768px) {
  .page-title {
    font-size: 2.5rem;
  }
  
  .intro-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .intro-visual {
    grid-template-columns: 1fr;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  .advantages-comparison {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .vs-divider {
    order: 2;
    margin: 1rem 0;
  }
  
  .comparison-card.traditional {
    order: 1;
  }
  
  .comparison-card.our-platform {
    order: 3;
  }
  
  .investment-grid {
    grid-template-columns: 1fr;
    max-width: 500px;
  }
}

@media (max-width: 480px) {
  .header-badges {
    flex-direction: column;
    align-items: center;
  }
  
  .feature-details {
    grid-template-columns: 1fr;
  }
}
</style>
